<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:metadata>
	<f:viewParam name="userName" value="#{userBean.userName}" />
</f:metadata>
<h:head>
	<title>#{msgs.windowTitle}</title>
	<h:outputStylesheet library="css" name="Styles.css" />
</h:head>

<h:body>
	<h:panelGroup styleClass="toolbar">
		<ui:include src="/resources/templates/toolbar.xhtml" />
	</h:panelGroup>

	<h:form>
		<p:notificationBar id="subscribedBar" position="top" effect="slide"
			effectSpeed="slow" widgetVar="subscribedBar" styleClass="top">
			<h:outputText
				value="#{msgs.subscriptionAdded} #{userBean.viewedUser.userName}"
				style="color:#FFCC00;font-size:36px;" />
		</p:notificationBar>
		<p:notificationBar id="unSubscribedBar" position="top" effect="slide" effectSpeed="slow"
			widgetVar="unSubscribedBar" styleClass="top">
			<h:outputText
				value="#{msgs.unSubscribed} #{userBean.viewedUser.userName}"
				style="color:#FFCC00;font-size:36px;" />
		</p:notificationBar>
		<p:poll interval="4" listener="subscribedBar.hide()" update="subscribedBar"/>
		<p:poll interval="4" listener="unSubscribedBar.hide()" update="unSubscribedBar"/>
	</h:form>

	<p:panel header="#{userBean.viewedUser.userName}">
		<h:form>
			<h:panelGrid id="infoPanel" columns="3" styleClass="infoGrid">
				<p:commandButton value="#{msgs.subscribe}"
					action="#{userBean.subscribe}"

					rendered="#{userBean.otherUsersProfile()}"
					disabled="#{userBean.alreadySubscribed()}"
					onmousedown="subscribedBar.show()" update="infoPanel" />

				<p:commandButton value="#{msgs.unSubscribe}"
					action="#{userBean.unSubscribe}"

					rendered="#{userBean.otherUsersProfile()}"
					disabled="#{userBean.notSubscribed()}"
					onmousedown="unSubscribedBar.show()" update="infoPanel" />
				<p:spacer />

				<h:outputLabel value="#{msgs.editUser}"
					rendered="#{userBean.ownProfile()}"/>
				<p:spacer rendered="#{userBean.ownProfile()}"/>


				<h:outputText for="userName" value="#{msgs.userName}" />
				<h:outputText value="#{userBean.viewedUser.userName}" />

				<h:graphicImage library="profilePics"
					name="#{userBean.viewedUser.userName}.png" height="100" width="100" />


				<h:outputLabel for="password" value="#{msgs.changePassword}"
					rendered="#{userBean.ownProfile()}" />

				<p:password id="password" value="#{userBean.viewedUser.password}"
					label="#{msgs.changePassword}" feedback="true" inline="true"
					immediate="true" rendered="#{userBean.ownProfile()}">
					<p:ajax event="keyup" render="pwerror"></p:ajax>
				</p:password>
				<p:message id="pwerror" for="password"
					rendered="#{userBean.ownProfile()}"/>

				<h:outputLabel for="repeatpassword" value="#{msgs.repeatPassword}"
					rendered="#{userBean.ownProfile()}" />
				<p:password id="repeatpassword" label="#{msgs.repeatPassword}"
					value="#{userBean.viewedUser.password}" required="true"
					match="password" immediate="true"
					rendered="#{userBean.ownProfile()}">
					<p:ajax event="keyup" render="pwrepeaterror"/>
				</p:password>
				<p:message id="pwrepeaterror" for="repeatpassword"
					rendered="#{userBean.ownProfile()}"/>

				<h:outputText for="realName" value="#{msgs.realName}" />
				<p:inplace
					emptyLabel="#{userBean.viewedUser.userName} #{msgs.noRealName}"
					editor="true" saveLabel="#{msgs.save}" cancelLabel="#{msgs.cancel}"
					disabled="#{userBean.otherUsersProfile()}">
					<p:inputText id="realName" value="#{userBean.viewedUser.realName}"/>
					<p:watermark for="realName" value="#{msgs.tellUsYourRealName}"/>
					<p:ajax event="save" listener="#{userBean.saveRealName}"/>
				</p:inplace>
				<p:spacer></p:spacer>

				<h:outputText for="email" value="#{msgs.email}" />
				<p:inplace emptyLabel="#{msgs.noMail}" editor="true"
					saveLabel="#{msgs.save}" cancelLabel="#{msgs.cancel}"
					disabled="#{userBean.otherUsersProfile()}">
					<p:inputText id="email" value="#{userBean.viewedUser.email}"/>
					<p:watermark for="email" value="#{msgs.yourEmail}" />
					<p:ajax event="save" listener="#{userBean.saveEmail}" />
				</p:inplace>
				<p:spacer></p:spacer>

				<h:outputText for="aboutUser" value="#{msgs.aboutUser}  "/>
				<p:inplace
					emptyLabel="#{userBean.viewedUser.userName} #{msgs.hasntWritten}"
					editor="true" saveLabel="#{msgs.save}" cancelLabel="#{msgs.cancel}"
					disabled="#{userBean.otherUsersProfile()}">
					<p:inputTextarea id="aboutUser" label="#{aboutUser}"
						value="#{userBean.viewedUser.profileText}"

						rows="5" cols="45"/>

					<!-- p:resizable for="aboutUser" minWidth="20" minHeight="40" maxWidth="50" maxHeight="100"></p:resizable-->
					<p:watermark for="aboutUser" value="#{msgs.writeSomething}"/>
					<p:ajax event="save" listener="#{userBean.saveProfileText}" />
					<p:ajax event="cancel" listener="#{userBean.cancelProfileTextEdit}" />
				</p:inplace>
				<p:spacer></p:spacer>
			</h:panelGrid>

		</h:form>
	</p:panel>

	<p:spacer height="15px" />
	<p:layout style="min-width:800px;min-height:400px;" id="layout">
		<p:layoutUnit header="#{msgs.recentTweets}" position="west"
			maxSize="600" minSize="350">
			<h:form>

				<h:dataTable value="#{userBean.displayedTweets}" var="tweet"
					border="0">
					<h:column>
						<p:fieldset>
							<h:panelGrid columns="2">
								<p:commandLink action="#{userBean.viewTweetUser(tweet)}" ajax="false">
									<h:graphicImage library="profilePics" name="#{tweet.user}.png"
										styleClass="smallImage" height="50" width="50" />
								</p:commandLink>
								<h:outputText value="#{tweet.text}" styleClass="tweets"
									escape="false" />
							</h:panelGrid>
						</p:fieldset>
					</h:column>
				</h:dataTable>
			</h:form>

		</p:layoutUnit>
		<p:layoutUnit header="#{msgs.subscriptions}" position="center"
			size="200" maxSize="200">
			<h:panelGroup styleClass="tweet">
				<p:spacer height="10px" />
				<p:spacer height="10px" />

				<h:form>
					<p:dataGrid columns="2" value="#{userBean.getSubscriptions()}"
						var="subscription" border="0">
						<h:column>
							<p:panelGrid columns="2">
								<p:commandLink action="#{userBean.viewUser(subscription)}"
									ajax="false">
									<h:graphicImage library="profilePics"
										name="#{subscription.userName}.png" styleClass="smallImage"
										height="50" width="50" />
									<h:outputText value="#{subscription.userName}"/>
								</p:commandLink>

							</p:panelGrid>

						</h:column>
					</p:dataGrid>
				</h:form>


				<p:spacer height="10px" />
			</h:panelGroup>
		</p:layoutUnit>
	</p:layout>
	<p:spacer height="20px" />
</h:body>
</html>